<template>
  <div class="content-table">
    <div class="content-table-top">
      <span>{{ $route.meta.label === '全部文件' ? '全部文件' : $route.meta.label === '其他' ? '其他文件' : ('全部' + $route.meta.label) }}</span>
      <span>共{{ showTable.length }}条数据</span>
    </div>

    <div style="height: calc(100% - 10px);width: 100%;">
      <el-table
        size="small"
        :data="showTable"
        :highlight-current-row="true"
        :header-row-class-name="'table-header'"
        height="100%"
        v-if="curIsTable"
      >
        <el-table-column label="文件名" prop="fileName">
          <template slot-scope="scope">
            <div :class="`file-img ${curTableImgType}`"></div>
            {{ scope.row.fileName }}
          </template>
        </el-table-column>
        <el-table-column label="大小" prop="fileSize" width="160">
          <template slot-scope="scope">
            {{ transformFileSizeFn(scope.row.fileSize) }}
          </template>
        </el-table-column>
        <el-table-column label="修改日期" prop="updateDate" width="216">
          <template slot-scope="scope">
            {{ transformDateFn(scope.row.updateDate) }}
          </template>
        </el-table-column>
      </el-table>
      <div v-else-if="showTable.length !== 0">
        <div class="table-card" v-for="(item, i) in showTable" :key="i">
          <div :class="`img-block ${curTableImgType}-big`"></div>
          <div class="card-title" :title="item.fileName">{{ item.fileName }}</div>
        </div>
      </div>
      <div v-else class="gb-no-data-outer">
        <div class="gb-no-data"></div>
      </div>
    </div>

    <!-- 新增文件弹框 -->
    <el-dialog
      :title="`上传${uploadRules.type}`"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-upload
        drag
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpload"
        :on-success="onSuccess"
        :on-error="onError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip" style="text-align: center;">只能上传文档文件</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { transformFileSize, transformDate, arrSorter } from '@/lib/common.js';

export default {
  name: 'ContentPanTable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    curTableImgType: {
      type: String,
      default: () => 'folder'
    },
    uploadRules: {
      type: Object,
      default: () => ({ type: '', limitArr: [] })
    }
  },
  data() {
    return {
      showTable: [],
      curIsTable: true,
      dialogVisible: false,
      fileInfo: {},
    }
  },
  methods: {
    transformFileSizeFn(value) {
      return (!value || value === '') ? '-' : transformFileSize(value);
    },
    transformDateFn(value) {
      return (!value || value === '') ? '-' : transformDate(value);
    },
    beforeUpload(file) {
      let judgeArr = this.uploadRules.limitArr;
      if (judgeArr.length !== 0) {
        let flag = judgeArr.filter(item => {
          return file.name.indexOf(item) !== -1;
        })
        if (flag.length === 0) {
          this.$message.warning(`上传的文件必须为${judgeArr.join('、')}中的类型之一`);
          return false;
        }
      }
      this.fileInfo = { fileName: file.name, fileSize: (file.size / 1024).toFixed(2), updateDate: file.uid };
    },
    onSuccess() {
      this.showTable.push(this.fileInfo);
      this.dialogVisible = false;
      this.$message.success('上传成功');
    },
    onError(err) {
      console.log(err);
      this.onSuccess();
    },
  },
  mounted() {
    // 初始化时数据的排序方式为按照名称排序
    this.showTable = arrSorter(this.tableData, 'fileName');
    // 监听输入框搜索事件
    this.$bus.$on('tableDataSearch', (val) => {
      if (this.$route.meta.label === '图片') return;
      if (val === '') return this.showTable = this.tableData;
      this.showTable = this.tableData.filter(item => item.fileName.indexOf(val) !== -1);
    });
    // 监听数据排序事件
    this.$bus.$on('tableDateSort', (val) => {
      this.showTable = arrSorter(this.tableData, val);
    });
    // 监听表格显示模式改变
    this.$bus.$on('tableModeSwitch', (val) => {
      this.curIsTable = val;
    });
    this.$bus.$on('tableTopBarClick', val => {
      if (val !== '上传') return;
      this.dialogVisible = true;
    });
  },
  beforeDestroy() {
    this.$bus.$off('tableDataSearch');
    this.$bus.$off('tableDateSort');
    this.$bus.$off('tableModeSwitch');
    this.$bus.$off('tableTopBarClick');
  },
}
</script>

<style lang="less">
.content-table {
  height: 100%;

  .content-table-top {
    height: 16px;
    line-height: 16px;
    margin-top: 10px;
    padding-right: 6px;
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: 12px;
    color: #666666;
    display: flex;
    justify-content: space-between;
  }

  .table-header {
    font-size: 12px;
    color: #888888;
  
    .el-table__cell {
      font-weight: 500;
    }
  }

  .file-img {
    width: 25px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;

    &.folder {
      width: 26px;
      height: 26px;
      background: url('../../../../assets/images/ContentImgs/folder.png');
    }

    &.document {
      background: url('../../../../assets/images/ContentImgs/document.png');
    }

    &.video {
      background: url('../../../../assets/images/ContentImgs/video.png');
    }

    &.audio {
      background: url('../../../../assets/images/ContentImgs/audio.png');
    }

    &.other {
      background: url('../../../../assets/images/ContentImgs/other.png');
    }
  }

  .table-card {
    width: 125px;
    height: 125px;
    display: inline-block;
    margin: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    padding: 2px;

    .card-title {
      width: 100%;
      font-size: 12px;
      color: #424e67;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &:hover {
        color: #09aaff;
      }
    }

    &:hover {
      border: 1px solid #f1f5fa;
      background: #f1f5fa;
    }

    .img-block {
      width: 56px;
      height: 56px;
      margin-left: 32px;
      margin-top: 20px;
      margin-bottom: 15px;
      cursor: pointer;

      &.folder-big {
        background: url('../../../../assets/images/ContentImgs/folder-big.png');
      }

      &.document-big {
        background: url('../../../../assets/images/ContentImgs/document-big.png');
      }

      &.video-big {
        background: url('../../../../assets/images/ContentImgs/video-big.png');
      }

      &.audio-big {
        background: url('../../../../assets/images/ContentImgs/audio-big.png');
      }

      &.other-big {
        background: url('../../../../assets/images/ContentImgs/other-big.png');
      }
    }
  }
}
</style>